<%@ page import="com.foxconn.AppDownload.controller.LoginController" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    //request.getScheme()获取协议  request.getServerName()获取服务器的Ip地址   request.getServerPort()获取服务器的端口
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+	request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<title>${appName}</title>
<head>
    <base href="<%=basePath%>">
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js">
</script>

<script>
$(document).ready(function(){
    //window.history.pushState(null, null, 'https://txz.foxconn.com:8080/itapp/download');

    var androidUrl = $("#downloadPack").data("androidurl");
    var iOSUrl = $("#downloadPack").data("iosurl");
   var browser={
    versions: function() { 
        var u = navigator.userAgent, app = navigator.appVersion; 
        return {//移动终端浏览器版本信息
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
                ios: !!u.match(/(i[^;]+;)( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
        };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

if(browser.versions.iPhone || browser.versions.iPad) {
   //$("#help1").css('visibility','visible');
    $("#button1").click(function(){
   //var msg="【温馨提示】\n安装前，请确认是否已下载及安装  “服务器凭证”，iOS 10 以上系统，还需在 “证书信任设置” 对该服务器授权 ！"
    var msg= "【温馨提示】\n 当前网络较慢,安装可能耗时较久,请耐心等待,请勿重复点击下载!";
   if(confirm(msg) == true){
    if (iOSUrl == "0"){
        alert("此版本為Android，请更换设备后下载！")
    }else {
        $("#button1").css('visibility','hidden');
        $("#gif1").show();
        $("#text").show();
        window.location.href = iOSUrl;
    }

  }{
   return false;
  }}); 
} else if (browser.versions.android)
{
    // $("#help1").css('visibility','hidden');

     $("#button1").click(function(){
     if (androidUrl == "0"){
         alert("此版本為iOS，请更换设备后下载！")
     }else {
         $("#button1").css('visibility','hidden');
         $("#gif1").show();
         window.location.href = androidUrl;
     }
   });
}
else {
     $("#button1").click(function(){
    var msg="【温馨提示】\n 系统侦测到当前设备为非移动端设备，不可下载该应用 ！";
     alert(msg);
   });
}
 
  
});
</script>
<style type="text/css">
  a{
    text-decoration: none;
  }
  a:hover{
    color: red; 
  }
  a:visited{
    color: blue;
  }
</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head>
    
<body style ="margin:0 auto;background-color:#F1EDF1D5">
<canvas></canvas>
<script src="jquery/mouse.js"></script>

<div style="display: block;  width: 100%;height:95px;"><img src="image/top_bg.png" style="width:100%;height:100%;"></img> </div>

<div style="display: block;  width: 130px; margin:50px auto;"><img src="${iconUrl}" style="width:120px;height:120px;border-radius:20px;"></img> </div>

<div style ="width:320px; margin:50px auto;display: flex; justify-content: center; align-items: center;">
<%--	<img src="../image/apple.png" style="margin-left:1px;width:44px;height:44px;background-size:44px 44px;"></img>--%>
<%--    <img src="../image/android.png" style="margin-left:1px;width:32px;height:32px;background-size:32px 32px;"></img>--%>
    <c:if test="${qrCodePathMap.size()==2}">
        <img src="image/apple.png" style="margin-left:1px;width:44px;height:44px;background-size:44px 44px;"></img>
        <img src="image/android.png" style="margin-left:1px;width:32px;height:32px;background-size:32px 32px;"></img>
    </c:if>
    <c:if test="${qrCodePathMap.size()==1&&clientType=='Android'}">
        <img src="image/android.png" style="margin-left:1px;width:32px;height:32px;background-size:32px 32px;"></img>
    </c:if>
    <c:if test="${qrCodePathMap.size()==1&&clientType=='iOS'}">
        <img src="image/apple.png" style="margin-left:1px;width:32px;height:32px;background-size:32px 32px;"></img>
    </c:if>
	<span style ="color:black;margin-left:10px;font-size:20px;">${appName}</span>
	<span style ="width:60px;height:24px;line-height:24px;text-align:center;color:white;margin-left:10px;font-size:14px;background:#3FACF1;border-radius:3px;"> 正式版</span>
</div>

<c:if test="${qrCodePathMap.size()==1&&clientType=='Android'}">
    <div id="help1" data-androidUrl="${downloadAppPathMap.get('Android')}" style="display:none;width:200px;color:#778090;font-size:17px;margin:20px auto;display: flex; justify-content: flex-start; align-items: center; visibility: hidden;"><span style="display:inline; width:200px;height:50px;position:absolute;left:50%;margin-left:-100px;margin-top:-15px;text-align:center;"> <a href="hp.html">[了解更多]</a>  </span></div>
</c:if>
<c:if test="${qrCodePathMap.size()==1&&clientType=='iOS'||qrCodePathMap.size()==2}">
    <div id="help1" data-androidUrl="${downloadAppPathMap.get('Android')}" style="display:none;width:200px;color:#778090;font-size:17px;margin:50px auto;display: flex; justify-content: flex-start; align-items: center;"><span style="display:inline; width:200px;height:50px;position:absolute;left:50%;margin-left:-100px;margin-top:-15px;text-align:center;"> <a href="hp.html">[了解更多]</a>  </span></div>
</c:if>


<div id="downloadPack" data-iosurl="${downloadAppPathMap.get('iOS')}" data-androidurl="${downloadAppPathMap.get('Android')}" style="display: flex;justify-content: center" >
    <c:if test="${qrCodePathMap.size()==1}">
        <div style="position:absolute;left:50%;margin-left:-150px;transform: translate(50%, -18%);margin-top: -10px;">
            <div id="qrcode" style="z-index:100; width: 150px;"><img src="${qrCodePathMap.get(clientType)}" style="width:150px;height:150px;"></img> </div>
            <div style="position:absolute;background-color: #FFFFFF;width: 150px;margin-top: -18px;text-align: center;font-size: 14px;font-weight: bold">${clientType}</div>
        </div>
    </c:if>
    <c:if test="${qrCodePathMap.size()==2}">
        <div style="position:absolute;left:50%;margin-left:-150px;transform: translate(0%, -18%);margin-top: -10px;">
            <div id="qrcode1" style="z-index:100;display: inline; width: 150px;"><img src="${qrCodePathMap.get('iOS')}" style="width:150px;height:150px;"></img> </div>
            <div style="position:absolute;background-color: #FFFFFF;width: 150px;margin-top: -18px;text-align: center;font-size: 14px;font-weight: bold">ios</div>
            <div id="qrcode2" style="z-index:100;display:inline; width: 150px;"><img src="${qrCodePathMap.get('Android')}" style="width:150px;height:150px;"></img> </div>
            <div style="background-color: #FFFFFF;width: 150px;margin-left: 155.5px;margin-top: -18px;text-align: center;font-size: 14px;font-weight: bold">Android</div>
        </div>
    </c:if>

<%--    <div id="qrcode1" style="z-index:100;display: inline;  width: 150px;"><img src="../image/QRCode/qrcode-and.png" style="width:150px;height:150px;"></img> </div>--%>
<%--    <div style="position:absolute;background-color: #FFFFFF;width: 150px;margin-top: -18px;text-align: center;font-size: 14px;font-weight: bold">ios</div>--%>
<%--    <div id="qrcode2" style="z-index:100;display:inline; width: 150px;"><img src="src/main/webapp/image/QRCode/qrcode-and.png" style="width:150px;height:150px;"></img> </div>--%>
<%--    <div style="background-color: #FFFFFF;width: 150px;margin-left: 155.5px;margin-top: -18px;text-align: center;font-size: 14px;font-weight: bold">Android</div>--%>
</div>

<div style="display: inline;  width: 320px; margin-top:160px;position:absolute;left:50%;margin-left:-160px">

<button id="button1" style="background:#1BBC9C;width:250px;height:50px;color:white;font-size:20px;margin:50px auto;display:block;border-radius:25px;text-align:center;line-height:50px;border-width:0px;">安装</button>

<img id="gif1" src="image/loading2.gif" style="display:none;width:50px;height:50px;position:absolute;left:50%;margin-left:-25px;margin-top:-100px;text-align:center;"> </img>

<p id="text" style="font-size:16px;color:red;display:none;left:50%;width:290px;margin-left:-145px;margin-top:-30px;position:absolute;">预计耗时2分钟,可按Home键在桌面查看</p>

<span style="width:320px;color:black;margin-top:20px;font-size:15px;display:flex; justify-content: center; align-items: center;position:absolute;left:50%;margin-left:-160px;">版本：${lastVersion} | 更新时间 ：${editDate}</span>
<span style="width:320px;color:blue;margin-top:60px;font-size:14px;display:flex; justify-content: center; align-items: center;position:absolute;left:50%;margin-left:-160px;">Copyright © ${editDate.substring(0,4)} IT. All rights reserved.</span>

</div>
</body>

<style>
    canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /*background-color: rgba(176, 169, 141, 0.99);*/
        background-color: rgba(247, 244, 248, 0.78);
        z-index: -1;
    }
</style>

</html>

 
